<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <!-- 这是编写博客系统得列表展示页面 -->
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/bolg_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="imag/导航栏头像.png">
        <!-- span 标签不独占一行, 是一个小盒子 -->
        <span class="title"> 我的博客系统 </span>
        <div class="spacer"></div>
        <!-- # 在a标签中表示占位符 -->
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>

    <!-- 页面内容部分 -->
    <div class="container">
        <!-- 左侧信息, 先表示出左侧大盒子-->
        <div class="container-left">
            <div class="user">
                <img src="Imag/用户名头像.png" alt="这是一个用户名头像">
                <!-- 用户名 -->
                <h3>别时须清欢</h3>
                <a href="https://gitee.com/dashboard">Gitee 地址</a>
                <div class="counter">
                    <!-- <p>文章</p>
                    <p>分类</p> -->
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>?</span>
                    <span>?</span>
                </div>
            </div>
        </div>

        <!-- 右侧信息， 先表示出右侧大盒子-->
        <div class="container-right">
            <!-- 表示一篇博客页面 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客摘要-->
                <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore reiciendis quam animi eum inventore sit esse, minima omnis reprehenderit fuga accusamus ducimus in praesentium! Ex, vero? Accusamus atque ad blanditiis.</div>
                <!-- 查看全文按钮 -->
            <a href="#">查看全文 &gt&gt</a>

            </div>

        </div>

    </div>

</body>
</html>